<template>
    <div id="owlimginfo">
      <div class="edit" @click="toEdit" v-if="ishow">
        <img src="../../assets/bianji.png"/>
      </div>
      <owl-header></owl-header>
      <div class="scrollbox">
        <img src="../../assets/Docker.png"/>
      </div>

      <div class="pager"><span></span><span></span><span></span></div>

      <div class="comment">
        #与时间赛跑:<br>
        <span style="padding-left: 12px">这是一个关于这个系列的图片的描述,讲述了一个故事,这是一个关于这个系列的图片的描述,讲述了一个故事。</span>

      </div>

      <div class="comment">
        comment:<br>
      </div>

      <div class="comment">
        #0:<span style="padding-left: 24px">2018.08.01</span><br>
        <span style="padding-left: 12px;font-size: 12px">这是一个关于这个系列的图片的描述,讲述了一个故事,这是一个关于这个系列的图片的描述,讲述了一个故事。</span>

      </div>

      <div class="comment">
        #1:<span style="padding-left: 24px">2018.08.01</span><br>
        <span style="padding-left: 12px;font-size: 12px">这是一个关于这个系列的图片的描述,讲述了一个故事,这是一个关于这个系列的图片的描述,讲述了一个故事。</span>

      </div>

      <div class="comment">
        #2:<span style="padding-left: 24px">2018.08.01</span><br>
        <span style="padding-left: 12px;font-size: 12px">这是一个关于这个系列的图片的描述,讲述了一个故事,这是一个关于这个系列的图片的描述,讲述了一个故事。</span>

      </div>



      <div class="comment">
        #3:<span style="padding-left: 24px">2018.08.01</span><br>
        <span style="padding-left: 12px;font-size: 12px">这是一个关于这个系列的图片的描述,讲述了一个故事,这是一个关于这个系列的图片的描述,讲述了一个故事。</span>

      </div>

      <div class="comment">
        #4:<span style="padding-left: 24px">2018.08.01</span><br>
        <span style="padding-left: 12px;font-size: 12px">这是一个关于这个系列的图片的描述,讲述了一个故事,这是一个关于这个系列的图片的描述,讲述了一个故事。</span>

      </div>



      <div class="comment">
        #5:<span style="padding-left: 24px">2018.08.01</span><br>
        <span style="padding-left: 12px;font-size: 12px">这是一个关于这个系列的图片的描述,讲述了一个故事,这是一个关于这个系列的图片的描述,讲述了一个故事。</span>

      </div>


      <owl-edit-box ref="editpanel"></owl-edit-box>

    </div>
</template>

<script>
    import OwlHeader from "../owlHeader/owlHeader";
    import OwlEditBox from "../owlEditBox/owlEditBox";
    export default {
        name: "owlImgInfo",
      components: {OwlEditBox, OwlHeader},
      data(){

          return{

            ishow:true

          }

      },
      methods:{


        toEdit(){


          this.$refs.editpanel.toggle();
          this.hide();
        },
        show(){


          this.ishow=true;

        },
        hide(){

          this.ishow=false;
        }
      }
    }
</script>

<style scoped>

  #owlimginfo{

    width: 100%;
    min-height: 100%;
    /*background-color: rgba(255,255,255,1);*/
    position: absolute;
    /*background-color: black;*/
    z-index: 100;
    top: 0px;
    padding-bottom: 24px;
  }

  .scrollbox{

    width: 100%;
    height:220px;
    /*background-color: yellow;*/
    /*margin-top: 80px;*/

  }
  .scrollbox img{

    width: 100%;
    height: 100%;
  }

  .pager span:first-child{

    background-color: dodgerblue;

  }
  .pager{

    margin-top: 12px;
  }
  .pager span{

    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 50%;
    background-color: white;
    margin: 4px;
  }

  .comment{

    font-size: 14px;
    padding-left: 12px;
    padding-right: 12px;
    width: calc(100% - 24px);
    height: auto;
    padding-bottom: 12px;
    /*background: aqua;*/
    text-align: left;
    color: black;
    color: white;
  }

  .edit{

    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: dodgerblue;
    position: fixed;
    left: 100%;
    margin-left: -60px;
    top: 100%;
    margin-top: -60px;
    z-index: 120;
    transition: all ease-out 0.4s;
  }

  .edit:active{

    opacity: 0.6;
  }

  .edit img{

    width: 40px;
    height: 40px;
  }




</style>
